<template>
    <div class="sac">
      <div class="list">
        <ul>
          <li><p class="p1">{{$t('have')}}</p></li>
          <li><p class="p2">{{sacnum}}</p></li>
        </ul>
        <ul>
          <li><p class="p1">{{$t('price')}}</p></li>
          <li><p class="p2">{{sacprice}}</p></li>
        </ul>
      </div>

      <x-input  :placeholder="$t('sell num')" class="weui-vcode" v-model="num">
        <x-button slot="right" type="primary" mini  @click.native="qNum">{{$t('sell all')}}</x-button>
      </x-input>
      <div class="wire"></div>
      <x-input :placeholder="$t('tradepwd')" type="password" class="pw" v-model="psw"></x-input>
      <p style="padding: .2rem .4rem 0;color: #898989;font-size: .3rem">预计收益CNY: {{ (sacprice * num).toFixed(2)}}</p>
      <x-button class="btn" @click.native="sell">{{$t('confirm trade')}}</x-button>
      <div v-transfer-dom>
        <confirm v-model="show"
                 :title="$t('info')"
                 @on-cancel="onCancel"
                 @on-confirm="onConfirm">
          <p style="text-align:center; color: #999">{{$t('confirm pay')}}</p>
        </confirm>
      </div>
    </div>
</template>

<i18n>
  title.SAC:
    en: SAC
    zh-CN: SAC
  have:
    en: Haven
    zh-CN: 现有数量
  sell num:
    en: Sell Num
    zh-CN: 请输入卖出数量
  sell all:
    en: Sell All
    zh-CN: 全部卖出
  confirm trade:
    en: Confirm
    zh-CN: 确认交易
  info:
    en: Info
    zh-CN: 提示
  confirm pay:
    en:  You Will pay the coin?
    zh-CN: 确认付币吗?
  tradepwd:
    en: Trade Password
    zh-CN: 请输入交易密码
  num is wrong:
    en: Num Must > 0
    zh-CN: 数量必须大于零
</i18n>

<script>
  import {Toast, Confirm, XInput, XButton} from 'vux'
  export default {
    name: 'SAC',
    components: {
      XButton,
      XInput,
      Confirm,
      Toast
    },
    data () {
      return {
        show: false,
        sacnum: '',
        sacprice: '',
        num: '',
        psw: '',
        firstTime: true
      }
    },
    created () {
      this.init()
    },
    methods: {
      init () {
        this.getInfo()
      },
      qNum () {
        this.num = this.sacnum
      },
      getInfo () {
        let vue = this
        let url = 'api/usercenter/sacpriceandnum'
        vue.post({
          url: url,
          params: {
            token: localStorage.token
          },
          success: function (data) {
            console.log(data)
            vue.sacprice = data.data.sacprice
            vue.sacnum = data.data.sacnum
          }
        })
      },
      sell () {
        if (this.psw === '' || this.num === '') {
          this.$vux.toast.text('请填写完成信息', 'middle')
        } else {
          this.show = true
        }
      },
      onCancel () {
      },
      onConfirm () {
        let vue = this
        console.log(vue.num)
        if (vue.num <= 0) {
          vue.$vux.toast.text(vue.$t('num is wrong'), 'middle')
          vue.num = ''
          return false
        }
        let url = 'api/usercenter/exchangesac'
        vue.post({
          url: url,
          params: {
            token: localStorage.token,
            sacprice: vue.sacprice,
            sacnum: vue.num,
            pay_password: vue.psw
          },
          success: function (data) {
            console.log(data)
            if (data.code === 0) {
              vue.$vux.toast.text(data.msg, 'middle')
            } else {
              vue.num = ''
              vue.psw = ''
              vue.$vux.toast.text(data.msg, 'middle')
            }
          }
        })
      }
    }
  }
</script>

<style scoped>
  .weui-btn_primary{
    background-color: #fff;
    color:#57a94f;
    border: 1px solid #57a94f;
  }
  .list ul{
    display: flex;
    border: 1px solid #fafafa;
    list-style: none;
    height: 0.9rem;
  }
  .list ul li{
    flex-grow: 1;
    text-align: center;
  }
  .list ul li p{
    height: 0.9rem;
    line-height: 0.9rem;
  }
  .list ul li .p1{
    color: #666666;
    font-size: .28rem;
    text-align: left;
    padding-left: 0.4rem;
  }
  .list ul li .p2{
    color: #333333;
    font-size: .4rem;
    text-align: right;
    padding-right: 0.4rem;
  }
  .wire{
   margin: -0.2rem 0 0 0.3rem;
    width:5.2rem;
    border-bottom: 1px solid #f1f4f6;
  }
  .weui-vcode{
    padding-top: 0.5rem;
  }
  .weui-vcode{
    color: #6a6a6a;
    font-size: 0.28rem;
  }
  .pw{
    font-size: 0.28rem;
    margin-top: 0.5rem;
    border: none;
    border-bottom: 1px solid #fafafa;
  }
 .btn{
   background-color: #537fbf;
   color: #fff;
   margin-top: 1.2rem;
   font-size: 0.28rem;
   width: 6.7rem;
 }
  .weui-cell:before{
    border-top:none ;
  }
</style>
